<template>
  <div class="selectCar">
     <x-header title="选择车辆" :left-options="{backText:''}" class='whiteHeader'>
       <span slot='right' class="admins" @click='$router.push("allCar")'>管理</span>
     </x-header>
      <div class="allCar">
        <div class="carList" v-for="item in allCarMess.CARS" v-if='item.BRAND!="未设置"'>
          <div class="allMess">
            <img :src="allCarMess.CAR_LOGO_URL+item.SICON">
            <div class="carMess">
                <p>
                {{item.LICENCE}} <span v-if='item.MILE'>里程 {{item.MILE}} km</span>
              </p>
              <h2><span v-if='defaultId==item.CAR_ID'>[默认车辆]</span>{{item.BRAND}}{{item.SET}}{{item.MODEL}}</h2>
            </div>
          </div>
          <div class="operate">
              <div class="select" @click="selectCar(item)" :class="{'on':item.CAR_ID==selectId}"></div>
          </div>
        </div>
        
      </div>
      <a class="addCar" href="javascript:;" @click='addCar'>
         <img src="../../assets/image/address/addCar.png">
        添加爱车
      </a>
  </div>
</template>
<script>
/*选择地址*/
import { XHeader } from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"selectCar",
  // 数据
  data(){

    return{
      selectId:"",//选中的车辆id
      userId:"",//用户id
      allCarMess:"",   //用户所有车辆信息
      defaultId:''  //用户默认车辆信息
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.defaultId=getCookie('CAR_ID');
    this.selectId=sessionStorage.getItem('selectCarId');
    //获取用户所有车辆
    this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allCarMess=res;
        }
      },err=>{
        console.log(err);
      })
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
      // 选择地址(设置默认地址)
      selectCar(item){
        localStorage.setItem('selectCar',JSON.stringify(item));//选择的车辆信息
        this.selectId=item.CAR_ID;//选择的id
        sessionStorage.setItem('selectCarId',item.CAR_ID);
        if(localStorage.getItem('from')=='maintain'){//选择车辆来自保养
          this.$router.push('/maintainHome');
        }
      },
      //添加车辆
      addCar(){
        localStorage.setItem("addCar",JSON.stringify({}));
        // 标识是从选车跳转过去的
        localStorage.setItem('selectCars',1);
        // localStorage.removeItem('from');
        localStorage.removeItem('editCar');
        this.$router.push('/addCar');
      }
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.selectCar{
  width: 7.5rem;
  min-height: 100%;
  background: #efeff4;
  .admins{
    color: #222;
    font-size: 0.28rem;
    padding: 0.1rem;
  }
  .allCar{
    padding-bottom: 0.6rem;
    .carList{
      background: #fff;
      margin-bottom: 0.1rem;
      text-align: left;
      display: flex;
      .border-bottom{
          position: relative;
          border-top: none !important;
      }
      .border-bottom::after {
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #e0e0e0;
          -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
      }
      .allMess{
        display: flex;
        width: 86%;
        padding:0.15rem;
        img{
          width: 0.8rem;
          height: 0.8rem;
          min-width: 0.8rem;
          margin:0.2rem 0.1rem;
        }
        .carMess{
          width: 85%;
          padding-left: 0.2rem;
          h2{
            font-size: 0.26rem;
            margin: 0.1rem 0;
            color: #444;
            margin-bottom: 0.2rem;
            overflow: hidden;
            white-space: nowrap ;
            text-overflow:ellipsis;
            span{
              font-size: 0.2rem;
              color: red;
            }
          }
          p{
            font-size: 0.32rem;
            font-weight: 500;
            color: #000;
            margin: 0.12rem 0 0.24rem 0;
            span{
              float: right;
              font-weight: normal;
              color: #666;
              font-size: 0.26rem;
            }
          }
          
        }
      }
      .operate{
        width: 15%;
        .select{
          width: 0.42rem;
          height:0.4rem;
          margin: 0.55rem auto;
          padding: 0.15rem;
          background: url(../../assets/image/address/noChecked.png) center center no-repeat;
          background-size: 0.42rem 0.4rem;
        }
        .on{
          background: url(../../assets/image/address/checked.png) center center no-repeat;
          background-size: 0.42rem 0.4rem;
        }
      }
    }
    
  }
  .addCar{
    position:fixed;
    bottom:0;
    width: 100%;
    display: block;
    height:0.8rem;
    line-height: 0.8rem;
    font-size: 0.305556rem;
    text-align: center;
    background: #e42e3b;
    color: #fff;
    img{
      width: 0.55rem;
      height: 0.33rem;
      margin-right: 0.05rem;
      vertical-align: middle;
    }
  }
}
</style>